<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>营业日报表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="${ctxPath}/layui/css/layui.css?t=1554901098009" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>1号</legend>
</fieldset>
 
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
</div>
 
<br>
 
<!-- <div class="layui-progress">
  <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
</div> -->
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
</div>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>2号</legend>
</fieldset>
 
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-red" lay-percent="10%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="15%"></div>
</div>
 
<br>
 
<!-- <div class="layui-progress">
  <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
</div> -->
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="75%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
</div>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>3号</legend>
</fieldset>
 
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-red" lay-percent="25%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="35%"></div>
</div>
 
<br>
 
<!-- <div class="layui-progress">
  <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
</div> -->
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="25%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-cyan" lay-percent="20%"></div>
</div>


<script src="${ctxPath}/layui/layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    setPercent: function(){
      //设置50%进度
      element.progress('demo', '50%')
    }
    ,loading: function(othis){
      var DISABLED = 'layui-btn-disabled';
      if(othis.hasClass(DISABLED)) return;
    
      //模拟loading
      var n = 0, timer = setInterval(function(){
        n = n + Math.random()*10|0;  
        if(n>100){
          n = 100;
          clearInterval(timer);
          othis.removeClass(DISABLED);
        }
        element.progress('demo', n+'%');
      }, 300+Math.random()*1000);
      
      othis.addClass(DISABLED);
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = $(this).data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>

</body>
</html>